<template>
	<div class="decorate-imgAdv"
      :style="{'padding-top':tplItemData.modulePadding || tplItemData.modulePadding ==0 ? tplItemData.modulePadding+'px':'5px',
      'padding-bottom':tplItemData.modulePadding || tplItemData.modulePadding ==0 ? tplItemData.modulePadding+'px':'5px',
      'padding-left':tplItemData.levelPadding ? tplItemData.levelPadding+'px':'0px',
      'padding-right':tplItemData.levelPadding ? tplItemData.levelPadding+'px':'0px'}">
      <!-- 折叠轮播 -->
      <div ref="getHeight"  class="imgAdv-box1 swiper-wrap" v-if="tplItemData.showType==1" >
        <!-- 小程序端用swiper -->
        <wx-swiper class="imgadv-wx-swiper" :circular="true" :style="{height:swiperHeight}" indicator-color="#ebedf0" indicator-active-color="#FE5000" :autoplay="autoplay" :indicator-dots="showIndicators">
          <wx-swiper-item class="imgadv-wx-swiper-item" v-for="(item,index) in tplItemData.dataset" :key="index">
            <h4 class="imgAdv_title" v-if="tplItemData.isTitle == 1">
              {{item.showtitle}}
              <span class="subTitle">{{item.subtitle}}</span>
            </h4>
            <div href="javascript:;" @click="openLink(item.link)">
              <img :src="item.pic" :show-menu-by-longpress="true" :ref="'wxImg'+index" alt="" @load="onImageLoad($event)"/>
            </div>
          </wx-swiper-item>
        </wx-swiper>
      </div>
      <!-- 分开展示 -->
      <div class="imgAdv-box2" v-else-if="tplItemData.showType==2">
        <ul>
          <li v-for="(item, index) in tplItemData.dataset" :key="index" :style="{marginBottom:tplItemData.margin+'px'}">
            <a href="javascript:;" @click="openLink(item.link)">
              <img :src="item.pic" :show-menu-by-longpress="true" alt="">
              <div class="title-box" v-if="item.showtitle || item.subtitle">
                <p class="main-title">{{item.showtitle}}</p>
                <p class="sub-title">{{item.subtitle}}</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <!-- 绘制热图 -->
      <div class="imgAdv-box3" v-else-if="tplItemData.showType==3">
        <!-- 绘制热区折叠轮播 -->
        <div class="imgAdv-box3-style1 swiper-wrap" v-if="tplItemData.hotStyle==1">
          <!-- 小程序端用swiper -->
          <wx-swiper class="my-swipe" :circular="true" :style="{height:swiperHeight}" indicator-color="#ebedf0" indicator-active-color="#FE5000" :autoplay="autoplay" :indicator-dots="showIndicators">
            <wx-swiper-item class="imgadv-wx-swiper-item" v-for="(item,index) in tplItemData.datasethot" :key="index">
              <h4 class="imgAdv_title" v-if="tplItemData.isTitle == 1">
                {{item.showtitle}}
                <span class="subTitle">{{item.subtitle}}</span>
              </h4>
              <div class="imgAdv-box3-img">
                <img :src="item.pic" alt="" @load="onImageLoad($event)">
                <a class="hotActive" v-for="(item,index) in item.hostactive" :key="index" @click="openLink(item.link)" :style="{height:item.height+'%',width:item.width+'%',left:item.left+'%',top:item.top+'%'}">
                </a>
              </div>
            </wx-swiper-item>
          </wx-swiper>
        </div>

        <ul class="imgAdv-box3-style2" v-else>
          <li v-for="(item, index) in tplItemData.datasethot" :key="index" :style="{marginBottom:tplItemData.margin+'px'}">
              <h4 class="imgAdv_title" v-if="tplItemData.isTitle == 1">
                {{item.showtitle}}
                <span class="subTitle">{{item.subtitle}}</span>
              </h4>
              <div class="imgAdv-box3-img">
                <img :src="item.pic" alt="">
                <a class="hotActive" v-for="(item,index) in item.hostactive" :key="index" href="javascript:;" @click="openLink(item.link)" :style="{height:item.height+'%',width:item.width+'%',left:item.left+'%',top:item.top+'%'}">
                </a>
              </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
/**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
import { openPage } from '@/utils/utils'
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
export default Vue.extend({
  name: 'index',
  data() {
    return {
      showIndicators: true,
      autoplay: true,
      imgadvWxH: '0',
      imgHeight: ''
    }
  },

  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  computed: {
    swiperHeight: {
      get(){
        let height = 0
        if (this.tplItemData.isTitle == 1) {
          height = (parseFloat(this.imgadvWxH) * 1) + 26
        } else {
          height = parseFloat(this.imgadvWxH)
        }
        return height+'px'
      }
    }
  },

  methods: {
    openLink(link) {
      openPage(link)
    },
    // 小程序swiper获取图片高度
    onImageLoad(event) {
      // 切换城市主页时，计算高度有问题
      document.querySelector('.swiper-wrap').$$getBoundingClientRect().then((res) => {
        const imgAdvBox1Width = res.width
        const imgHeight = event.detail.height / event.detail.width * imgAdvBox1Width
        if (imgHeight > parseFloat(this.imgadvWxH)) {
          this.imgadvWxH = `${imgHeight}px`
        }
      })
    },
  },
})
</script>

<style lang='scss'>
.decorate-imgAdv{
  // 标题/副标题
  .imgAdv_title{
    font-weight: 500;
    font-size: 32px;
    color: #333;
    margin-bottom: 16px;
    .subTitle{
      font-weight: normal;
      font-size: 24px;
      color: #999;
      margin-left: 16px;
    }
  }
  .imgAdv-box1{
    img{
      width: 100%;
      display: block;
    }
  }
  .imgAdv-box2{
    ul{
      li{
        a{
          img{
            width: 100%;
            display: block;
          }
          .title-box{
            // border-bottom: solid 1px #eee;
            // padding: 5px 0 10px;
            .main-title{
              font-size: 28px;
              color: #000;
              font-weight: 700;
            }
            .sub-title{
              font-size: 24px;
              color: #888;
            }
          }
        }
      }
    }
  }
  .imgAdv-box3{
    .imgAdv-box3-img{
      position: relative;
      overflow: hidden;
    }
    img{
      width: 100%;
      display: block;
    }
    .hotActive{
      display: block;
      position: absolute;
    }
  }
}
</style>
